<template>
	<view style="padding-bottom: 20upx;">
		<view class="panel-body">
			<view class="panel-body-item" v-for="(todo, index) in todoList" :key="index" @click="linkTo(todo.linkTo,index+1)">
				<image class="item-pic" mode="widthFix" :src="todo.imgUrl"></image>
				<view class="item-info">
					<view class="item-info__h3">{{ todo.todoTitle }}</view>
					<view class="item-info__h6">{{ todo.todotext }}</view>
				</view>
				<text class="item-time">{{ todo.todoTime }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'panelList',
	props: {
		todoList: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	watch: {},
	methods: {
		linkTo: function(url,index) {
		    if(url!=undefined && url!='')
            {
                uni.navigateTo({
                    url: url
                });
                return;
            }
            uni.navigateTo({
                url: `/pages/tabbar/study/practice/index?type=${index}`
            });
		}
	}
};
</script>

<style lang="scss" scoped>
.panel {
	background: #fff;
	padding-bottom: 20upx;
	&-body {
		width: 690upx;
		margin: 0 auto;
		background-color: #f2f4ff;
		border-radius: 15upx;
		&-item {
			height: 108upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			text-align: left;
			padding: 0 22upx;

			.item-pic {
				width: 80upx;
				margin-right: 18upx;
			}
			.item-info {
				flex: 1;
				&__h3 {
					font-size: 28upx;
					color: #333;
				}
				&__h6 {
					font-size: 24upx;
					color: #999999;
				}
			}
			.item-time {
				font-size: 24upx;
				color: #999;
			}
		}
	}
}
</style>
